<template>
  <div>
     <el-form :inline="true"  class="demo-form-inline">
  <el-form-item label="电话用户名:">
    <el-input  placeholder="请输入电话号码" v-model="keyWord"></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="search()" v-model="guestselbtn" v-if="guestselshow">查询</el-button>
  </el-form-item>
</el-form>
    <!-- <div style="width:70%;margin:20px auto;text-align:right">
      <el-button type="primary" @click="add()">增加</el-button>
    </div> -->
    <el-table
      ref="multipleTable"
      :data="pageInfo.list"
      tooltip-effect="dark"
      style="width: 820px; margin: 0px auto"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" prop="guest_id" align="center"> </el-table-column>
      
      <el-table-column prop="guest_name" label="客户姓名" width="120" align="center">
      </el-table-column>
      <el-table-column prop="guest_sex" label="客户性别" width="120" align="center">
      </el-table-column>
       <el-table-column prop="guest_telephone" label="客户电话" width="120" align="center">
      </el-table-column>
       <el-table-column prop="guest_idCard" label="客户身份证" width="120" align="center">
      </el-table-column>
       <el-table-column prop="guest_identity" label="是否会员" width="120" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          
          
             <el-button size="mini" type="primary" @click="giveupdate(scope.row)" v-model="guestupdbtn" v-if="guestupdshow"
            >修改</el-button>
            <!-- <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button> -->
        </template>
    </el-table-column>
    </el-table>
 
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>


<!-- 增加模态框开始 -->
    <el-dialog title="客户增加" :visible.sync="addDialogFormVisible">
      <el-form>
        <el-form-item label="客户姓名" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.guest_name"></el-input>
        </el-form-item>
        <el-form-item label="客户性别" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.guest_sex"></el-input>
        </el-form-item>
        <el-form-item label="客户电话" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.guest_telephone"></el-input>
        </el-form-item>
        <el-form-item label="客户身份证" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.guest_idCard"></el-input>
        </el-form-item>
        <el-form-item label="客户是否会员" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.guest_identity"></el-input>
        </el-form-item>
        
        
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 增加模态框结束 -->




<!-- 修改模态框开始 -->
    <el-dialog title="用户修改" :visible.sync="updateDialogFormVisible">
      <el-form>
         <el-form-item label="客户姓名" :label-width="formLabelWidth">
          <el-input type="text" v-model="updateForm.guest_name"></el-input>
        </el-form-item>
        <el-form-item label="客户性别" :label-width="formLabelWidth">
          <el-input type="text" v-model="updateForm.guest_sex"></el-input>
        </el-form-item>
        <el-form-item label="客户电话" :label-width="formLabelWidth">
          <el-input type="text" v-model="updateForm.guest_telephone"></el-input>
        </el-form-item>
        <el-form-item label="客户身份证" :label-width="formLabelWidth">
          <el-input type="text" v-model="updateForm.guest_idCard"></el-input>
        </el-form-item>
        <el-form-item label="客户是否会员" :label-width="formLabelWidth">
          <el-input type="text" v-model="updateForm.guest_identity"></el-input>
        </el-form-item>

        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改模态框结束 -->

  </div>
</template>
<script>
export default {
  data() {
    return {
      guestselbtn:'46',
      guestupdbtn:'45',
      guestselshow:false,
      guestupdshow:false,
      pageInfo: {},
      curentPage: 1,
      pageSize: 5,
      keyWord:'',
      ids:[],
      addDialogFormVisible:false,
      addForm: {
        guest_name: "",
        guest_sex: "",
        guest_telephone: "",
        guest_idCard: "",
        guest_identity: ""
      },
      formLabelWidth: "150px",
      roleDialogFormVisible:false,
     
      checkedRoles: [],
      uid:'',
      updateDialogFormVisible:false,
      updateForm: {
        guest_name: "",
        guest_sex: "",
        guest_telephone: "",
        guest_idCard: "",
        guest_identity: ""
      },
    };
  },
  methods: {
    loadData() {
      this.$axios
        .get("/guest", {
          params: {
            curentPage: this.curentPage,
            pageSize: this.pageSize,
            keyWord: this.keyWord,
          },
        })
        .then((res) => {
          this.pageInfo = res.data.data;
                setTimeout(() => {
      //设置默认选中项
        this.login();
      }, 0);
        })
        .catch((error) => {});
    },
    

    handleSelectionChange(val) {
      var ids1=[];//存放选中的id
      for(let item of val){
          ids1.push(item.guest_id);
      }
      //将选中的所有项的id放到数据模型中
      this.ids=ids1;

      console.log(ids);
      //this.multipleSelection = val;
    },
    //val：每页的条目数
    handleSizeChange(val) {
      this.pageSize = val;
      this.curentPage = 1;
      this.loadData();
      console.log(`每页 ${val} 条`);
    },
    //val:当前页
    handleCurrentChange(val) {
      this.curentPage = val;
      this.loadData();
      console.log(`当前页: ${val}`);
    },
    search(){
      this.loadData();
    },
    // delAll(ids){
    //       this.$axios.post("/guest/all",ids)
           
    //       .then(res=>{
    //           alert(res.data.message);
    //           this.loadData();
    //       })
    //       .catch(error=>{

    //       })
    // },
    handleDelete(ids){
       this.$axios.delete("/guest/"+ids.guest_id)
      .then(res=>{
        alert(res.data.message);
        this.loadData();
      })
    },

    add(){

      this.addDialogFormVisible = true;//展示模态框

      
    },
    saveUser(){
      this.$axios.post("/guest",this.addForm)
      .then(res=>{
        alert(res.data.message);
        this.addForm.guest_name='';
        this.addForm.guest_sex='';
        this.addForm.guest_telephone='';
        this.addForm.guest_idCard='';
        this.addForm.guest_identity='';
        this.addDialogFormVisible = false;
      }).catch(error=>{

      })
    },

   
    
  giveupdate(ids){
    this.$axios.get("/guest/"+ids.guest_id)

    .then(res=>{
      this.updateForm = res.data.data
      alert(res.data.message)
    })
    this.updateDialogFormVisible=true;
  },

  update(){
    this.$axios.put("/guest",this.updateForm
    )
    .then(res=>{
      alert(res.data.message);
      this.updateDialogFormVisible = false;
      this.loadData();
    })
  },
  login(){
      var l = sessionStorage.getItem("permission_list");
      var list = l.split(',');
      list.forEach((item)=>{
        if(item == this.guestselbtn){
          this.guestselshow = true;
        }
        if(item == this.guestupdbtn){
          this.guestupdshow = true;
        }
      })
    }
  },
  mounted() {
    this.loadData();
  },
};
</script>